<template>
    <div class="container">
        <div>用户名: {{ user.username }}</div>
        <div>个人介绍: {{ user.intro }}</div>
        <!-- 微信的 -->
        <div class="content" v-if="user.accountJoin.wechat">
            <div>
                <span>关联平台: </span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-weixin"></use>
                </svg>
            </div>
            <div class="indent">账号: {{ user.accountJoin.wechat }}</div>
        </div>
        <!-- QQ的 -->
        <div class="content" v-if="user.accountJoin.qq">
            <div>
                <span>关联平台: </span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-QQ"></use>
                </svg>
            </div>
            <div class="indent">账号: {{ user.accountJoin.qq }}</div>
        </div>
        <!-- sina的 -->
        <div class="content" v-if="user.accountJoin.sina">
            <div>
                <span>关联平台: </span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xinlang"></use>
                </svg>
            </div>
            <div class="indent">账号: {{ user.accountJoin.sina }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Userinfo",
    props: ['user']
}
</script>

<style scoped>
.container {
    padding: 10px;
    width: 1200px;
    margin: 0 auto;
    border: 1px solid #333;
    border-radius: 10px;
    line-height: 24px;
    margin-bottom: 10px;
}
.indent {
    margin-left: 32px;
}
</style>